<template>
  <div id="detailsBar">
    <div class="bar" ref="bar"></div>
  </div>
</template>

<script>
export default {
  props: {
    starXData: Array | Object,
    starYData: Array | Object
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawbar();
  },

  methods: {
    drawbar() {
      let myChart = this.$echarts.init(this.$refs.bar);
      let option = {
        color: ['#f3ac62'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'none' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            return params[0].axisValue + '</br>' + params[0].data + '%';
            //  if (params.value) {
            //     return (
            //       params.name +
            //       ":" +
            //       ((params.value / total) * 100).toFixed(2) +
            //       "%"
            //     );
            //   } else {
            //     return params.name + ":" + 0;
            //   }
          }
        },
        grid: {
          left: '0',
          right: '30',
          bottom: '2',
          top: 15,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.starXData,
            name: '岁',
            nameLocation: 'end',
            axisTick: {
              alignWithLabel: false,
              show: false
            },
            nameTextStyle: {
              color: 'rgba(195,202,223,.5)'
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(195,202,223,.8)',
                width: 1, //这里是为了突出显示加上的
                type: 'solid'
              }
            },
            axisLabel: {
              interval: 0,
              // rotate: 20,
              // fontSize: 12,
              // margin: 12,

              show: true,
              textStyle: {
                // 字体配置
                color: 'rgba(195,202,223,.5)',
                fontSize: '12',
                lineHeight: 14
              },
              formatter: function (value, index) {
                let re = /岁/g;
                return value.replace(re, '');
              }
              //   rotate:40 // 是否旋转
            },
            splitLine: {
              //去掉网格线
              show: false,
              color: '#fff'
            }
          }
        ],
        // yAxis: {
        //   show: false,
        //   //  name: "商品总数/动销商品数",
        //   axisLabel: {
        //     show: false
        //   },
        //   textStyle: {
        //     // 字体配置
        //     color: 'rgba(195,202,223,.5)',
        //     fontSize: '12',
        //     lineHeight: 14
        //   },
        //   axisLine: {
        //     show: false
        //   },
        //   axisTick: {
        //     //y轴刻度线
        //     show: false
        //   },
        //   type: 'value'
        // },
        yAxis: [
          {
            type: 'value',
            max: 100,
            nameTextStyle: {
              color: '#c3cadf'
            },
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(195,202,223,.5)'
              }
            },
            splitLine: {
              //去掉网格线
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(195,202,223,.5)'
              }
            },
            axisLabel: {
              formatter: function (value, index) {
                // 格式化成月/日，只在第一个刻度显示年份
                //   var date = new Date(value);
                //   var texts = [date.getMonth() + 1, date.getDate()];
                //   if (index === 0) {
                //     texts.unshift(date.getYear());
                //   }
                //   return texts.join('/');
                return value + '%';
              }
            }
          }
        ],
        series: [
          {
            barWidth: 15, //柱状宽度
            // name: "直接访问",
            type: 'bar',
            data: this.starYData,
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                // barBorderRadius: [6, 6, 0, 0]
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      myChart.setOption({
        // graphic: {
        //   type: 'image',
        //   bounding: 'raw',
        //   top: '60%',
        //   left: '5%'
        //   /*           style: {
        //     image:
        //       "",
        //     width: "70",
        //     height: "30",
        //   }, */
        // }
      });
    }
  }
};
</script>
<style lang='less' scoped>
#detailsBar {
  width: 100%;
  height: 100%;
  margin: auto;
  .bar {
    width: 100%;
    height: 100%;
  }
}
</style>